<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顺丰网页</title>
    <link rel="stylesheet" href="shunfeng.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body {
            margin: 0;
        }
        
        #header {
            margin: 0 auto;
            width: 1280px;
            height: 73px;
            display: flex;
            justify-content: space-between;
        }
        
        #box1 {
            width: 100%;
            height: 487px;
            background-image: url(img/bg.jpg);
            background-size: 100% 100%;
            position: relative;
        }
        
        #box2 {
            width: 100%;
            height: 98px;
            background-color: #DC1E32;
        }
        
        #box3 {
            width: 100%;
            /*border: 1px solid red;*/
        }
        
        #box4 {
            width: 40px;
            margin: 40px auto;
            display: flex;
            justify-content: space-between;
        }
        
        #box5 {
            width: 100%;
            height: 400px;
            background-image: url(img/case.jpg);
            text-align: center;
            margin-top: 12px;
            position: relative;
        }
        
        #box6 {
            background-color: #E8E8E8;
            width: 100%;
            margin: 90px auto;
            /*text-align: center;*/
            position: relative;
            padding-top: 15px;
            padding-bottom: 30px;
        }
    </style>
</head>

<body>
    <div id="header">
        <div id="hleft">
            <div id="logo"></div>
            <div id="daohang1">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">物流</a></li>
                    <li><a href="#">金融</a></li>
                    <li><a href="#">商业</a></li>
                    <li><a href="#">成功案例</a></li>
                    <li><a href="#">服务支持</a></li>
                    <li><a href="#">顺丰控股投资者关系</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
        </div>
        <div id="hright">
            <div id="line1"></div>
            <div id="line2">95538</div>
            <div id="line3"></div>
            <div id="line4"><a href="#">会员登录 | 会员注册</a></div>
            <div id="line5"></div>
            <div id="line6"><a href="#">返回旧版网站</a></div>
            <div id="line7"></div>
        </div>
    </div>
    <div id="box1">
        <div id="input">
            <div id="input1">
                <input type="text" id="input11" placeholder="&ensp;您可以输运单号进行查询">
                <div id="find">
                    <span class="fa fa-search"></span>
                </div>
            </div>
            <div id="input2">
                <input type="text" id="input22" placeholder="&ensp;或您可以输入手机号进行查询">
                <div id="phone">
                    <span class="fa fa-mobile"></span>
                </div>
            </div>
            <button id="input3">马上查单</button>
        </div>
        <div id="hint1" class="hint">
            <div id="hint1-left">
                <div class="message"></div>
                <div class="wenxin">温馨提醒</div>
            </div>
            <div id="hint1-right" class="red-new">
                <p><a href="#">关于顺丰快递新增中国大陆进口到付价格表的知会</a></p>
            </div>
        </div>
        <div id="hint2" class="hint">
            <div id="hint2-left">
                <div class="message" id="fang"></div>
                <div class="wenxin">防骗警示</div>
            </div>
            <div id="hint2-right" class="red-new">
                <p><a href="#">关于冒充顺丰速运诈骗客户的警示公告</a></p>
            </div>
        </div>
    </div>
    <div id="box2">
        <div id="container">
            <a href="#">
                <div class="inner">
                    <div id="yundan1" class="yundan"></div>
                    <div id="yunzi">运单追踪</div>
                </div>
            </a>
            <a href="#">
                <div class="inner">
                    <div id="yundan2" class="yundan"></div>
                    <div id="yunzi">我要寄件</div>
                </div>
            </a>
            <a href="#">
                <div class="inner">
                    <div id="yundan3" class="yundan"></div>
                    <div id="yunzi">运费时效查询</div>
                </div>
            </a>
            <a href="#">
                <div class="inner">
                    <div id="yundan4" class="yundan"></div>
                    <div id="yunzi">服务网点查询</div>
                </div>
            </a>
            <a href="#">
                <div class="inner">
                    <div id="yundan5" class="yundan"></div>
                    <div id="yunzi">收寄范围查询</div>
                </div>
            </a>
            <a href="#">
                <div class="inner">
                    <div id="yundan6" class="yundan"></div>
                    <div id="yunzi">在线客服</div>
                </div>
            </a>
        </div>
    </div>
    <div id="box3">
        <div id="title">
            <p>顺丰全业务介绍</p>
            <p>基于物流，融通金融，流通商业</p>
            <div class="leader">
                <div class="two">
                    <a href="#" id="wuliu">物流</a>
                    <div class="sq" id="sq1"></div>
                </div>
                <div class="two">
                    <a href="#">金融</a>
                    <div class="sq" id="sq2"></div>
                </div>
                <div class="two">
                    <a href="#">商业</a>
                    <div class="sq" id="sq3"></div>
                </div>
            </div>
        </div>
        <div id="main">
            <div id="main-left" class="main-inner">
                <img src="img/fruit.jpg" id="fruit">
                <div>
                    <span id="cold" class="fa fa-truck"></span>
                    <span>冷运服务</span>
                    <p>顺丰依托强大的冷链运输网和温控管理系统，为食品和医药冷链客户提供专业的冷运服务。</p>
                </div>
            </div>
            <div id="main-right" class="main-inner">
                <img src="img/woman.png" id="woman">
                <div>
                    <span id="chun" class="fa fa-building"></span>
                    <span>仓储服务</span>
                    <p>顺丰依托自身强大的仓储和运输网络资源，为电商客户打造一站式物流服务。</p>
                </div>
            </div>
        </div>
    </div>
    <div id="box4">
        <div id="dot1"></div>
        <div id="dot2"></div>
    </div>
    <div id="box5">
        <h1>成功案例</h1>
        <span>每一时刻，都有无数的客户托付与期待被成功交付，顺丰与前瞻者同行，与成就者共成就</span>
        <a href="#">查看全部</a>
        <div class="case">
            <div class="small-case">
                <span class="fa fa-mobile"></span>
                <p>3C电子行业</p>
            </div>
            <div class="small-case">
                <span class="fa fa-medkit"></span>
                <p>医疗行业</p>
            </div>
            <div class="small-case">
                <span class="fa fa-bomb"></span>
                <p>生鲜行业</p>
            </div>
            <div class="small-case">
                <span class="fa fa-cart-plus"></span>
                <p>快消行业</p>
            </div>
        </div>
    </div>
    <div id="box6">
        <div id="c1">
            <h1>促销活动</h1>
            <span>第一时间分享，最新促销活动</span>
        </div>
        <a href="#" id="ck">查看全部</a>
        <div id="activity">
            <div id="a1">
                <img src="img/a1.jpg">
                <div class="b">
                    <p>海淘上eBay , 顺丰SFBUY包邮转</p>
                    <p>国际转运首1KG包邮啦！ [详情]</p>
                    <p>进行中 2017.07.01-2017.12.31</p>
                </div>
            </div>
            <div id="a2">
                <img src="img/a2.jpg">
                <div class="b">
                    <p>好运来得更猛烈了</p>
                    <p>“丰彩”即开型体育彩票，7月4日，在深圳、南昌、长沙正式上线啦！ [详情]</p>
                    <p>进行中 2017.07.04-2017.7.31</p>
                </div>
            </div>
            <div id="a3">
                <img src="img/a3.jpg">
                <div class="b">
                    <p>顺丰新客推荐，开春上线</p>
                    <p>顺丰新客推荐，开春上线即日起至12月31日，大陆顺丰个人会员通过此活动推荐好友注… [详情]</p>
                    <p>进行中 2017.03.28-2017.12.31</p>
                </div>
            </div>
            <div id="a4">
                <img src="img/a4.jpg">
                <div class="b">
                    <p>海购丰运联手eBay , 国际转运首重免邮</p>
                    <p>2017年1月1日至6月30日期间，在eBay下单的中国大陆用户（注册地址选择中… [详情]</p>
                    <p>进行中 2017.01.01-2017.06.30</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>